
<template>
  <view class="tail-page">
    <view class="item">
      <view class="item-one">
        <b v-if="myCardPackage.type==2">￥{{ myCardPackage.saleMoney }}</b>
        <b v-if="myCardPackage.type==1">{{ myCardPackage.sale / 10 }}折</b>
      </view>
      <view class="item-two">
        <div class="center-two">
          <span class="xrcxq">{{ myCardPackage.name }}</span>
        </div>
        <div class="center-two">
          <span class="yxqz">有效期至{{myCardPackage.endTime}}</span>
        </div>
      </view>
    </view>
    <view class="item-bottom">
      <view class="item-wh">
        <div class="item-bottom-left">
          <span>限时段&nbsp;|&nbsp;限订单&nbsp;|&nbsp;限车型&nbsp;|&nbsp;限使用渠道</span>
        </div>
      </view>
    </view>
    <view class="coupon_bottom">
      <div class="coupon-bo-bo">
        <span class="bottom-left">金额</span>
        <span class="bottom-right">
          <span v-if="myCardPackage.type==1">{{ myCardPackage.sale }}折，</span>
          <span>满{{myCardPackage.max}}元可用，最高抵扣{{myCardPackage.saleMoney}}元</span>
        </span>
      </div>
      <div class="coupon-bo-bo">
        <span class="bottom-left">有效期</span>
        <span class="bottom-right">
          <span>有效期至{{ myCardPackage.endTime }}</span>
        </span>
      </div>
      <div class="coupon-bo-bo">
        <span class="bottom-left">可用时间</span>
        <span class="bottom-right">
          <span>不限制</span>
        </span>
      </div>
      <div class="coupon-bo-bo">
        <span class="bottom-left">可用时段</span>
        <span class="bottom-right">
          <span>{{myCardPackage.useStartTime}}-{{myCardPackage.useEndTime}}</span>
        </span>
      </div>
      <div class="coupon-bo-bo">
        <span class="bottom-left">可用渠道</span>
        <span class="bottom-right">
          <span>榴莲打车APP</span>
        </span>
      </div>
      <div class="coupon-bo-bo">
        <span class="bottom-left">可用车型</span>
        <span class="bottom-right">
          <span>{{myCardPackage.carProp}}</span>
        </span>
      </div>
      <div class="coupon-bo-bo">
        <span class="bottom-left">可用城市</span>
        <span class="bottom-right">
          <span>全国</span>
        </span>
      </div>
    </view>
  </view>


</template>
<script>

import { getMyCouponOne } from '@/api/durian/thail/thail.js'

export default {
  data() {
    return {
      ids:'',
      myCardPackage: {}
    };
  },
  onLoad:function (res) {
    this.ids=res.id
    this.selectMyCard();
  },
  methods: {
    selectMyCard() {
      getMyCouponOne(this.ids).then(res=>{
        this.myCardPackage=res.data;
        console.log(this.myCardPackage)
      })
    }

  }


}


</script>

<style>
.bottom-right{
  display: block;
  margin-left: 20px;
  margin-top: 7px;
  color: #8f8f94;
}
.bottom-left{
  width: 70px;
  height: 30px;
  display: block;
  margin-top: 7px;
  margin-left: 5px;
}
.coupon-bo-bo{
  display: flex;
  width: 340px;
  height: 35px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}
.coupon_bottom{
  width: 360px;
  height: 310px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  border-radius: 5px;
  background-color: white;
}
.item-wh{
  width: 340px;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px dashed #8f8f94;
}
.item-bottom-left{
  display: flex;
  width: 250px;
  font-size: 10px;
  color: #9a9a9a;
  margin-top: 7px;
}
.item-bottom{
  display: flex;
  width: 360px;
  height: 30px;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0px 0px 5px 5px;
}
.xrcxq{
  font-size: 14px;
  margin-top: 10px;
}
.center-two{
}
.yxqz{
  font-size: 10px;
  color: #8f939c;
}
.item {

  display: flex;
  width: 360px;
  height: 10vh;
  background-color: white;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px 5px 0px 0px;
}
.item-one{
  width: 100px;
  display: flex;
  font-size: 25px;
  color: #a21706;
  height: 15vh;
  margin-top: 20px;
  margin-bottom: auto;
  margin-left: 20px;
  margin-right: auto;
  padding-top: 5px;
}
.item-two{
  width: 300px;
  margin-top: 20px;
  height: 60px;
  margin-left: 0px;
  padding-top: 5px;
}

</style>
